@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-from-right {
  from { transform: translateX(-30px); }
  to { transform: translateX(0); }
}

@keyframes slide-to-left {
  from { transform: translateX(0); }
  to { transform: translateX(30px); }
}

::view-transition-group(page) {
  overflow: hidden;
}

/* 新页面进入 */
::view-transition-new(page) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  animation-duration: 300ms;
  animation-delay: 300ms;
}

/* 旧页面退出 */
::view-transition-old(page) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in reverse, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  animation-duration: 300ms;
}
